<template>
  <div>
    <BaseSearch @exports="exports" :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
    <BaseTable :pagination="false" :columns="columns" v-bind="table"></BaseTable>
  </div>
</template>

<script>
import BaseTable from '@/components/BaseTable/index.vue'
import BaseSearch from '@/components/BaseSearch/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
const service = async params => {
  const formatTime = value => {
    if (!value) return ''
    const date = new Date(value)
    const year = date.getFullYear()
    let month = date.getMonth() + 1
    month = month < 10 ? '0' + month : month
    return `${year}-${month}`
  }
  const data = {
    date: params.date ? params.date : formatTime(new Date()),
  }
  const res = await http.get('/operations/getEventTrackingList', {
    params: data,
  })
  return {
    data: res,
  }
}
export default {
  name: 'zhongTian',
  mixins: [FormTableMixin(service)],
  components: {
    BaseSearch,
    BaseTable,
  },
  watch: {
    form: {
      handler(val, oldVal) {
        if (this.$refs['search']) {
          this.$refs['search'].submit()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      searchConfig: [
        {
          component: 'date-picker',
          prop: 'date',
          valueFormat: 'yyyy-MM',
          value: this.formatTime(new Date()),
          type: 'month',
          label: '选择月份',
          placeholder: '请选择',
        },
      ],
      columns: [
        {
          label: '日期',
          prop: 'date',
          render: (value, row) => {
            return <div>{row.date ? row.date.replace(/T/g, ' ') : '--'}</div>
          },
        },
        { label: '工具栏点击量', prop: 'toolbarClicks' },
        { label: '广告位点击量', prop: 'advertisementClicks' },
        { label: 'IP数总数（不重复）', prop: 'ipNum' },
        { label: '宁波银行产品点击量', prop: 'nbBankProductClicks' },
        { label: '浙商银行产品点击量', prop: 'zsBankProductClicks' },
        { label: '注册用户数', prop: 'usersNum', width: 90 },
      ],
    }
  },
  methods: {
    formatTime(value) {
      if (!value) return ''
      const date = new Date(value)
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      return `${year}-${month}`
    },
    async exports() {
      const res = await http.get('/operations/export', {
        responseType: 'blob',
        params: {
          endTime: '',
          date: this.form.value.date ? this.form.value.date : this.formatTime(new Date()),
          startTime: '',
          type: '5',
        },
      })
      let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=UTF-8' })
      let downloadElement = document.createElement('a')
      let href = window.URL.createObjectURL(blob) //创建下载的链接
      downloadElement.href = href
      downloadElement.download = '中天数据埋点（总用户数）.xlsx' //下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放掉blob对象
    },
  },
}
</script>

<style lang="scss" scoped>
p.p-title {
  font-weight: bold;
  padding: 22px 0;
}

::v-deep {
  .el-range-separator {
    width: 6% !important;
  }
}
</style>
